<script setup>
import { ref, reactive, shallowReactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Expand, Fold } from "@element-plus/icons-vue";
const route = useRoute();
const router = useRouter();
// 侧边栏是否折叠
let isCollapse = ref(false);
const loginout = () => {
  sessionStorage.clear();

  router.push({ name: "login" });
};

onMounted(() => {
  getSession();
});
const menuList = ref([]);
const userinfo = ref({});
const getSession = () => {
  setTimeout(() => {
    menuList.value = JSON.parse(sessionStorage.getItem("menuList"));
    userinfo.value = JSON.parse(sessionStorage.getItem("userinfo"));
    console.log(userinfo.value);
  }, 100);
};
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div>
          <p>商城后台管理系统</p>
          <div class="div">
            <el-button
              type="default"
              :icon="isCollapse ? Expand : Fold"
              plain
              size="small"
              @click="isCollapse = !isCollapse"
            />
            <el-dropdown>
              <span class="el-dropdown-link">
                {{ userinfo.mobile ? userinfo.mobile : "" }}
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="loginout"
                    >退出登录</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-container>
        <!-- <el-aside width="200px">Aside</el-aside> -->
        <el-menu
          :default-active="route.path"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          background-color="#d3dce6"
          text-color="#333"
          active-text-color="#fff"
          router
        >
          <el-menu-item
            v-show="item.children.length <= 0"
            :index="item.path"
            v-for="(item, index) in menuList"
            index="/main/home"
          >
            <el-icon><House /></el-icon>
            <template #title>{{ item.name }}</template>
          </el-menu-item>
          <el-sub-menu
            :index="item.path"
            v-for="(item, index) in menuList"
            v-show="item.children.length > 0"
          >
            <template #title>
              <el-icon><Setting /></el-icon>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item
              :index="items.path"
              v-for="items in item.children"
              v-if="item.children.length > 0"
              >{{ items.name }}</el-menu-item
            >
          </el-sub-menu>
          <!-- <el-sub-menu index="2">
            <template #title>
              <el-icon><Goods /></el-icon>
              <span>商城管理</span>
            </template>
            <el-menu-item index="/main/cates">分类管理</el-menu-item>
            <el-menu-item index="/main/specs">规格管理</el-menu-item>
            <el-menu-item index="/main/goods">商品管理</el-menu-item>
            <el-menu-item index="/main/goodsBrand">商品品牌</el-menu-item>
            <el-menu-item index="/main/seckills">秒杀管理</el-menu-item>
            <el-menu-item index="/main/banners">轮播图管理</el-menu-item>
            <el-menu-item index="/main/members">会员管理</el-menu-item>
          </el-sub-menu> -->
          <el-menu-item index="3" disabled>
            <el-icon><User /></el-icon>
            <template #title>个人中心</template>
          </el-menu-item>
          <el-menu-item index="4" disabled>
            <el-icon><Picture /></el-icon>
            <template #title>关于我们</template>
          </el-menu-item>
        </el-menu>
        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main>
          <el-footer>版权所有</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>
.common-layout {
  height: 100%;
  .el-container {
    height: 100%;
  }
}
.el-header {
  background-color: #b3c0d1;
  div {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    p {
      width: 160px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      font-weight: bold;
      letter-spacing: 2px;
    }
    .div {
      flex: 1;
      padding-left: 40px;
    }
  }
}
.el-aside {
  background-color: rgb(211, 220, 230);
}
.el-main {
  background-color: #e9eef3;
}
.el-footer {
  background-color: #b3c0d1;
  line-height: 60px;
  text-align: center;
}
.el-menu {
  border-right: none;
}
.el-menu-item.is-active {
  background-color: #aaa !important;
}
.el-menu-item:hover {
  background-color: skyblue;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
